import React, { useEffect, useState } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import { connect } from "react-redux";
import axios from "axios";
import "./index.css";
// antd
import { Layout, Menu } from "antd";
import {
  UserOutlined,
  VideoCameraOutlined,
  SettingOutlined,
} from "@ant-design/icons";

const { Sider } = Layout;
const { SubMenu } = Menu;

// icon映射表
const iconList = {
  "/home": <UserOutlined />,
  "/user-manage": <VideoCameraOutlined />,
  "/right-manage": <SettingOutlined />,
  "/user-manage/list": <VideoCameraOutlined />,
};

function SideMenu(props: { isCollapsed: boolean }) {
  // 路由
  const navigate = useNavigate();
  const location = useLocation();

  const [menu, setMenu] = useState([]);
  useEffect(() => {
    const fetchDate = async () => {
      const { data } = await axios.get("/rights?_embed=children");
      console.log(data);
      setMenu(data);
    };
    fetchDate();
  }, []);

  const {
    role: { rights },
  } = JSON.parse(localStorage.getItem("user") || "");

  const checkPagePermission = (item: {
    pagepermisson: string;
    key: string;
  }) => {
    // 判断是否为路由 且 用户路由权限里包含该路由
    return item.pagepermisson && rights.includes(item.key);
  };

  interface Imenu {
    children: [];
    key: string;
    title: string;
    pagepermisson: string;
  }
  const renderMenu = (menuList: Array<Imenu>) => {
    return menuList.map((item) => {
      if (item.children?.length && checkPagePermission(item)) {
        return (
          <SubMenu
            key={item.key}
            icon={iconList[item.key as keyof typeof iconList]}
            title={item.title}
          >
            {renderMenu(item.children)}
          </SubMenu>
        );
      }
      return (
        checkPagePermission(item) && (
          <Menu.Item
            key={item.key}
            icon={iconList[item.key as keyof typeof iconList]}
            onClick={() => {
              navigate(item.key);
            }}
          >
            {item.title}
          </Menu.Item>
        )
      );
    });
  };

  const selectKeys = [location.pathname];
  const openKeys = ["/" + location.pathname.split("/")[1]];
  return (
    <Sider trigger={null} collapsible collapsed={props.isCollapsed}>
      <div style={{ display: "flex", height: "100%", flexDirection: "column" }}>
        <div
          className={["logo", props.isCollapsed ? "collapsed" : null].join(" ")}
        >
          {!props.isCollapsed ? "React Project" : ""}
        </div>
        <Menu
          style={{ flex: "1", overflow: "auto" }}
          theme="dark"
          mode="inline"
          selectedKeys={selectKeys}
          defaultOpenKeys={openKeys}
        >
          {renderMenu(menu)}
        </Menu>
      </div>
    </Sider>
  );
}

const mapStateToProps = ({
  CollApsedReducer: { isCollapsed },
}: {
  CollApsedReducer: { isCollapsed: boolean };
}) => {
  return {
    isCollapsed,
  };
};

// 高阶组件
export default connect(mapStateToProps)(SideMenu);
